<!--
    ===============================地图工具栏组件====================================================
        地图工具栏组件功能包括长度面积测量、标绘、城市切换、书签等地图操作功能。
-->
<template>
    <div id='mapTool'>
        <el-button-group>
            <el-button>标绘</el-button>
            <el-button>书签</el-button>
            <el-button>城市</el-button>
             <el-dropdown>
                <el-button>
                    测量
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="MeasureLength">测距</el-dropdown-item>
                    <el-dropdown-item @click.native="MeasureArea">测面积</el-dropdown-item>
                    <el-dropdown-item @click.native="ClearMeasure">清除</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-button-group>
    </div>
</template>
<script>
import store from '../../vuex/store.js';
export default {
     name: 'MapTool',
     data(){
         return{
            points:null,
            lines:null,
            tempLines:null,
         }
     },
     store,
     mounted(){
        // this.InitMeasure();
     },
     methods:{

        // 初始化测量功能
         InitMeasure(){
            this.points=[];
            this.lines=  L.polyline(this.points,{showMeasurements: true, measurementOptions: {imperial:true}});
            this.tempLines= new L.polyline([]);
         },

        //  测量完成事件初始化
         CancelMeasure(){
            this.$store.state.map.off('click');
            this.$store.state.map.off('mousemove');
            this.$store.state.map.off('dblclick');
         },

        //  清除测量内容
         ClearMeasure(){
            this.$store.state.map.removeLayer(this.lines);
            this.$store.state.map.removeLayer(this.tempLines);
            this.InitMeasure();
            // this.$store.state.map.remoeLayer(this.tempLines);
         },

        //  测量长度
         MeasureLength(){
            this.CancelMeasure();    
            this.$store.state.map.on('click',(e)=>{
            this.points.push([e.latlng.lat,e.latlng.lng]);
            this.lines.addLatLng(e.latlng);
            this.$store.state.map.addLayer(this.lines);
            this.$store.state.map.addLayer(L.circle(e.latlng,{color:'#ff0000',fillColor:'ff0000',fillOpacity:1}))
            this.$store.state.map.on('mousemove',(e)=>{
                if(this.points.length>0){
                    let ls=[this.points[this.points.length-1],[e.latlng.lat,e.latlng.lng]];
                    this.tempLines.setLatLngs(ls);
                    this.$store.state.map.addLayer(this.tempLines);
                }
            });
        });

            this.$store.state.map.on('dblclick',(e)=>{
                L.polyline(this.points,{showMeasurements: true, measurementOptions: {imperial:true}}).addTo(this.$store.state.map);
                this.points=[];
                this.lines=new L.polyline(this.points,{showMeasurements: true, measurementOptions: {imperial:true}});
                this.$store.state.map.off('mousemove');
                // this.$store.state.map.off('click');
            });
         },
         
         // 测量面积
         MeasureArea(){
                this.CancelMeasure();   
                this.$store.state.map.off('click');
                this.$store.state.map.off('mousemove');
                this.$store.state.map.off('dblclick');

                this.$store.state.map.on('click',(e)=>{
                this.points.push([e.latlng.lat,e.latlng.lng]);
                this.lines.addLatLng(e.latlng);
                this.$store.state.map.addLayer(this.lines)
                this.$store.state.map.addLayer(L.circle(e.latlng,{color:'#ff0000',fillColor:'ff0000',fillOpacity:1}));
            });

            this.$store.state.map.on('mousemove',(e)=>{
                if(this.points.length>0) {
                    let ls=[this.points[this.points.length-1],[e.latlng.lat,e.latlng.lng]];
                    this.tempLines.setLatLngs(ls);
                    this.$store.state.map.addLayer(this.tempLines);
                }
            });

            this.$store.state.map.on('dblclick',(e)=>{
                L.polygon([this.points],{showMeasurements: true, measurementOptions: {imperial:true}}).addTo( this.$store.state.map);
                this.points=[];
                this.lines.remove()
                this.tempLines.remove()
                this.lines=new L.polyline([])
            });
         }
     }
}
</script>
<style>
    #mapTool{
        position:absolute;
        top: 10px;
        right: 50px;
        z-index:999;
      }
</style>